<template>
    <div>
        <div class="index-logo">
            <div class="logo">
                <img src="../../assets/img/index_bg.png">
                <a href="https://beian.miit.gov.cn/" style="color: #c6c6c7; line-height: 28px;">蜀ICP备2020028185号-3</a>
            </div>
        </div>
        <div class="forms">
            <van-uploader class="itemimg" :after-read="upvia">
                <img :src="Url+avatar" v-if="avatar"/>
                <img src="../../assets/img/via.png" v-else/>
                <div>上传头像</div>
            </van-uploader>
            <div class="item flex_r_b">
                <input type="text" name="username" value="" placeholder="用户名" v-model="username">
            </div>
            <div class="item flex_r_b">
                <input type="text" name="mobile" value="" placeholder="手机号" v-model="mobile">
            </div>
            <div class="item02 flex_r_b">
                <div class="item flex_r_b">
                    <input type="text" name="code" value="" placeholder="验证码" v-model="code">
                </div>
                <div class="getcode" @click="getcode()"  v-if='!showdjs'>获取验证码</div>
                <div class="getcode01" v-else>{{djs}}</div>
            </div>
            <div class="item flex_r_b">
                <input type="password" name="password" value="" placeholder="密码" v-model="password">
            </div>
            <div class="item01">
                <span class="regist" @click="comeBack()">已有账号，点击登录</span>
            </div>
        </div>
        <input type="button" class="red_btn" value="注册" @click="registe()">
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                showdjs:false,
                djs:"",
                username:"",
                mobile:"",
                code:"",
                password:"",
                avatar:""
            }
        },
        mounted(){

        },
        methods:{
            //上传头像
            upvia(file){
                file.status = 'uploading';
                file.message = '上传中';
                var that=this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload",fd,{}
                    ).then(function (res) {
                        console.log(res)
                    if (res.data.code == 1) {
                        that.avatar=res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
            registe(){
                var that=this;
                if(!that.avatar){
                    that.$toast('请上传头像');
                    return false
                }
                that.$axios.post(that.Url+'api/user.index/register',{       // 还可以直接把参数拼接在url后边
                    username:that.username,
                    mobile: that.mobile,
                    password:that.password,
                    code:that.code,
                    avatar:that.avatar
                }).then(function(res){
                    if(res.data.code == 1){
                        that.$toast.success("注册成功");
                        that.$router.go(-1);
                    }else {
                        that.$toast(res.data.msg)
                    }
                }).catch(function (error) {
                    that.$toast(error.data.msg)
                })
            },
            countdown() {
                let that=this;
                let djs=60;
                that.showdjs=true;
                that.djs=djs+'s';

                that.timer=setInterval(function(){
                    djs--;
                    if(djs==0){
                        clearInterval(that.timer);
                        that.showdjs=false;
                        return false;
                    }
                    that.djs=djs+'s';
                },1000)
            },
            //获取验证码
            getcode:function(){
                var that=this;

                //手机号正确
                if(!that.mobile){
                    that.$toast('请填写手机号');
                    return false
                }
                if(!(/^1[3456789]\d{9}$/.test(that.mobile))){
                    that.$toast('手机号有误');
                    return false
                }
                that.$axios.post(that.Url+'api/sms/send',{       // 还可以直接把参数拼接在url后边
                    mobile: that.mobile,
                    event:"register"
                }).then(function(res){
                    if(res.data.code == 1){
                        that.$toast.success(res.data.msg);
                        that.countdown()
                    }else {
                        that.$toast(res.data.msg)
                    }
                }).catch(function (error) {
                    that.$toast(error.data.msg)
                })
            },
            comeBack(){
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    .index-logo {
        display: -webkit-box;
        margin-top: 10px;
    }
    .index-logo .logo {
        -webkit-box-flex: 1;
        margin-right: 11%;
        margin-left: 20px;
        vertical-align: middle;
        min-height: 30px;
        line-height: 24px;
    }
    .index-logo .logo img {
        display: inline-block;
        width: 100%;
    }
    .forms{
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 15px;
        border-radius: 4px;
    }
    .forms .itemimg{
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
        margin: 12px 0;
        font-size: 14px;
        line-height: 32px;
    }
    .forms .itemimg img{
        width:64px;
        height:64px;
        border-radius: 50%;
        margin-top: 10px;
    }
    .forms .item{
        height: 36px;
        border-radius: 4px;
        font-size: 13px;
        border: 1px solid #e5e5e5;
        padding: 0 4%;
        background: #f9f9fb;
        width: 92%;
        display: block;
        margin-bottom: 15px;
    }
    .forms .item:first-child{
        margin-top: 0
    }
    .forms label{
        width: 24px;
    }
    .forms .item input{
        line-height: 36px;
    }
    .hide{
        display: none;
    }
    .forms .iconfont{
        color: #eee;
        font-size: 24px;
    }
    .forms .icon-zhanghao{
        width: 24px;
        height: 24px;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        font-size: 20px;
        text-align: center;
    }
    .forms input{
        width: calc(100% - 30px);
        font-size: 15px;
        color: #333
    }
    .forms .item01{
        padding: 0 15px 0 5px;
        box-sizing: border-box;
        font-size: 14px;
        color: #999999
    }
    .forms .item01 .regist{
        font-size: 12px;
        color: #ff5641;
    }
    .forms .item02{
        margin-top: 12px
    }
    .forms .item02 .item{
        width: calc(100% - 84px)
    }
    .forms .item02 .getcode{
        width: 80px;
        color: #ff5641;
        font-size: 12px;
        text-align: center;
        text-decoration: underline;
    }
    .red_btn {
        border-radius: 4px;
    }
    .red_btn {
        background: #fc5d4d;
        color: #fff;
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 90%;
        margin: 20px 5% 100px;
        box-shadow: 0 5px 10px #f6a59f;
    }
</style>